<template>
    <!-- 搜索框 -->
    <div class="search-box">
        <div class="flex">
            <div>
                <el-icon>
                    <Search />
                </el-icon>
                <span>筛选搜索</span>
            </div>
            <div>
                <el-button class="bot" @click="resetForm">重置</el-button>
                <el-button class="bot" type="primary" @click="submitFn">查询搜索</el-button>
            </div>
        </div>
        <div style="padding-top: 20px">
            <!-- 在input里面回车会造成刷新，大家今晚可以尝试解决一下 -->
            <!-- 在有多个搜索框的情况下添加全部清空功能 -->
            <el-form ref="searchFormRef" :model="listParams">
                <el-form-item label="活动名称:" label-width="120px">
                    <!-- @keyup.enter 回车事件 -->
                    <!-- <el-input v-model="listParams.keyword" placeholder="请输入账号、姓名" @keyup.enter="submitFn" /> -->
                    <el-input v-model="listParams.keyword" placeholder="请输入账号、姓名" />
                </el-form-item>
            </el-form>
        </div>
    </div>

    <!-- 添加按钮 -->
    <div class="add-box">
        <div class="left">
            <el-icon>
                <Tickets />
            </el-icon>
            <span>数据列表</span>
        </div>
        <div>
            <el-button @click="miaoshaFn" class="btn">秒杀时间段列表</el-button>
            <el-button @click="addUser" class="btn">添加活动</el-button>

        </div>
    </div>

    <!-- 表单 -->
    <div>
        <el-table border ref="multipleTableRef" :data="tableData" style="width: 100%">
            <el-table-column type="selection" />
            <el-table-column prop="id" label="编号">
            </el-table-column>
            <el-table-column property="title" label="活动标题" />
            <el-table-column label="活动状态">
                <template #default="scope">
                    活动未开始
                </template>
            </el-table-column>
            <el-table-column property="startDate" label="开始时间">
                <template #default="scope">
                    {{ fomatDate(scope.row.createTime) }}
                </template>
            </el-table-column>
            <el-table-column property="endDate" label="结束时间">
                <template #default="scope">
                    {{ fomatDate(scope.row.endDate) }}
                </template>
            </el-table-column>
            <el-table-column property="Address" label="上线/下线">
                <template #default="scope">
                    <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
                        @click="changeHandle(scope.row)"></el-switch>
                </template>
            </el-table-column>
            <el-table-column property="Address" label="操作" width="200px">
                <template #default="scope">
                    <el-button type="primary" text size="small"
                        @click="router.push(`/sms/selectSession?flashPromotionId=` + scope.row.id)">设置商品</el-button>
                    <el-button type="primary" text size="small" @click="handelShow(scope.row.id)">编辑</el-button>
                    <el-button type="primary" text size="small" @click="delectFn(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

    </div>
    <!-- 分页 -->
    <ElConfigProvider :locale="zhCn">
        <el-pagination v-model:currentPage="listParams.pageNum" v-model:page-size="listParams.pageSize" background
            layout="total, sizes, prev, pager, next ,jumper" :total="total" @size-change="pageSizeChange"
            @current-change="pageNumChange" :page-sizes="[5, 10, 20]" />
    </ElConfigProvider>
    <EditUser :show="Editshow" @hide='handelhIed' :ID="handelID" @referh="getlist" />
    <!-- @none="handlenone" -->

</template>

<script setup lang="ts">
import { user } from "@/api";
import { useTable } from "@/hooks/useTable";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { ElMessage, FormInstance } from "element-plus";
import { reactive, ref, toRef, toRefs } from "vue";
import { Search, Tickets } from "@element-plus/icons-vue";
import { fomatDate } from "@/utils"
import { ElMessageBox } from 'element-plus'
import EditUser from "./components/EditUser.vue";
import { useRouter } from "vue-router"
const router = useRouter()

interface IState {
    tableData: ISkillModel[];
    listParams: IUserListParams;
    total: number
}


const searchFormRef = ref<FormInstance>();

const state = reactive<IState>({
    tableData: [],
    listParams: {
        pageNum: 1,
        pageSize: 5,
        keyword: ''
    },
    total: 0
})

// 重置功能的实现：
// 1. 点击事件
// 2. 需要给el-from表单组件添加一个ref属性，得到该组件的实例
// 3. 点击的时候调用 组件实例的resetFields方法进行重置
// 4. 前提是 给 el-from 设置了 model 属性
// 5. 还需要给 el-form-item 设置相应的 prop 属性
const resetForm = () => {
    searchFormRef.value?.resetFields();
};

// 用来搜索框方法，进行重新渲染
const submitFn = () => {
    // 搜索一定要把页码回到第一页
    state.listParams.pageNum = 1
    // 重新请求一个数组回来把数据渲染到表格里面
    getlist();
};

//控制编辑框的显示隐藏
const Editshow = ref(false)

// const handlenone = () => {
//     Editshow.value = false
//     getlist()
// }
//封装请求
const getlist = () => {
    user.seckillApi(state.listParams).then(res => {
        if (res.code === 200) {
            // console.log(res.data.list);
            state.tableData = res.data.list
            // console.log(router.getRoutes());
            // console.log(res.data.totalPage);
            state.total = res.data.total

        }
    })
}
getlist()


//上线/下线
const changeHandle = (row: ISkillModel) => {
    handelID.value = row.id
    // updateShow.value = true
    // handelID.value = row.id
    // handelstatus.value = row.status
    ElMessageBox.confirm("确定要修改状态吗", "提示", {
        type: "warning",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
    }).then(() => {
        // 点击确定的回调
        // 如果是编辑  发起修改用户信息请求
        if (handelID.value !== 0) {
            user.selectUpdateApi({ id: row.id, status: row.status }).then(res => {
                ElMessage({
                    message: res.message,
                    type: res.code === 200 ? "success" : "error",
                });
            })
        }
    }).catch(() => {
        row.status = row.status === 1 ? 0 : 1;
        handelID.value = 0
        getlist()
    })

}
//控制隐藏框隐藏
const handelhIed = () => {
    Editshow.value = false
    handelID.value = 0
    getlist()

}
//当前点击的id
const handelID = ref(0)

//点击编辑
const handelShow = (id: number) => {
    Editshow.value = true
    handelID.value = id
}
//删除
const delectFn = (id: number) => {
    // handelID.value = id
    user.flashDleteApi(id).then(res => {
        if (res.code === 200) {
            console.log(res.data);
            getlist()
        }
    })

}

//分页功能
const pageSizeChange = () => {
    getlist()
}
const pageNumChange = () => {
    getlist()
}

//添加活动
const addUser = () => {
    Editshow.value = true
}
//秒杀时间段列表
const miaoshaFn = () => {
    router.push('/sms/flashSession')
}
let { tableData, listParams, total } = toRefs(state)

</script>

<style lang="less" scoped>
.search-box {
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0px 0px 6px 0px gray;
    margin-bottom: 30px;

    .flex {
        display: flex;
        justify-content: space-between;
    }

    .el-icon {
        margin-right: 10px;
    }

    .el-input {
        width: 250px;
    }
}

// .el-button {
//     padding: 0;
//     margin: 10px;
// }

.bot {
    padding: 5px;
}


.add-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 0 4px 2px #ccc;

    .left {
        display: flex;
        align-items: center;
        padding: 0 10px;

        .el-icon {
            margin-right: 10px;
        }

    }
}
</style>